{% extends 'cms/cms_base.html' %}
{% from "common/_macros.html" import static %}

{% block title %}用例管理{% endblock %}

{% block head %}
    <script src="{{ static("cms/js/querySparrow.js") }}"></script>
    <script src="{{ static("cms/js/caseManage.js") }}"></script>
    <link rel="stylesheet" href="{{ static('cms/css/caseManage.css') }}">
    <style>
        table {
            border-spacing: 0;
            border-collapse: collapse;
            text-align: left;
        }
        /*关键设置 tbody出现滚动条*/
        table tbody {
            display: block;
            height: 470px;
            overflow-y: scroll;
        }
        table thead,
        tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        /*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/
        table thead {
            width: calc( 100% - 16px);
        }
        table thead th {
            background: #ccc;
        }
    </style>
{% endblock %}

{% block page_title %}用例管理（共 {{ total }} 条数据）{% endblock %}

{% block main_content %}
    <div class="top-box-case" style="float: right; padding-bottom: 5px;">
        <span>用例名称：<input type="text" id="query_case_name" name="query_case_name" style="width: 200px;"></span>
        <span>所属分组：</span>
        <select id="query_group" style="width: 200px;">
        <option value="0">请选择</option>
            {% for group in tem_groups %}
                <option value="{{ group }}">{{ tem_groups[group] }}</option>
            {% endfor %}
        </select>
        <button type="button" class="btn btn-warning" id="refresh-btn" onclick="queryCaseManage()">查询</button>
        <a href="{{ url_for('cms.addcase') }}" target="_blank"><button class="btn btn-info">添加用例</button></a>
    </div>
    <div>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th style="width: 10%;">用例名称</th>
                <th style="width: 30%;">请求URL</th>
                <th style="width: 30%;">请求参数</th>
                <th style="width: 5%;">方法</th>
                <th style="width: 15%;">预期结果</th>
                <th style="width: 10%;">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for case in cases %}
                <tr data-case_name="{{ case[1] }}" data-case_sign="{{ case[2] }}" data-case_url="{{ case[3] }}"
                    data-case_param="{{ case[4] }}" data-expect_res="{{ case[6] }}" data-header="{{ case[7] }}"
                    data-group="{{ tem_groups[case[15]] }}" data-remark="{{ case[8] }}" data-status="{{ case[13] }}"
                    data-request_method="{{ case[5] }}" data-id="{{ case[0] }}">

                    <td style="width: 10%;">
                        <a href="/case_manage?caseid={{ case[0] }}" target="_blank">{{ case[1] }}</a>
                    </td>

                    <td style="width: 30%;">
                        {% if case[3]|length < 80 %}
                            <a href="{{ case[3] }}" target="_blank">{{ case[3] }}</a>
                        {% else %}
                            <a href="{{ case[3]|mycut(0, 79) }}…" target="_blank">{{ case[3]|mycut(0, 79) }}…</a>
                            <a tabindex="0" class="more" data-container="body" data-toggle="popover" data-placement="bottom" style="cursor: pointer" title="" data-content="{{ case[3] }}"><span style="color: blue;">详细</span></a>
                        {% endif %}
                    </td>

                    <td style="width: 30%;">
                        {% if case[4]|length < 77 %}
                            <span>{{ case[4] }}</span>
                        {% else %}
                            <span>{{ case[4]|mycut(0, 76) }}…</span>
                            <a tabindex="0" class="more" data-container="body" data-toggle="popover" data-placement="bottom" style="cursor: pointer" title="" data-content="{{ case[4] }}"><span style="color: blue;">详细</span></a>
                        {% endif %}
                    </td>

                    <td style="width: 5%;">{{ case[5] }}</td>
                    <td style="width: 15%;">{{ case[6] }}</td>

                    <td style="width: 10%;">
                        <button class="btn btn-default btn-xs edit-case-btn">编辑|调试</button>
                        <button class="btn btn-default btn-xs preview-case-btn">查看</button>
                        <button class="btn btn-danger btn-xs delete-case-btn" id="delete-case-btn">删除</button>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    {{ pagination.links }}

    <!-- 编辑/调试 -->
    <div class="modal fade" id="editcase-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="width: 70%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true" onclick="location.reload();">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加/修改用例</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span style="color: red">*</span>用例名称：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="case_name">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span style="color: red">*</span>用例编号：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="case_sign" disabled="disabled">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span style="color: red">*</span>请求URL：</label>
                            <div class="col-sm-10">
                                <textarea type="text" class="form-control" name="case_url"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">请求参数：</label>
                            <div class="col-sm-10">
                                <textarea type="text" class="form-control" name="case_param"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span style="color: red">*</span>请求方法：</label>
                            <div class="col-sm-3">
                                <select class="form-control" id="request_method">
                                    <option value="post">post</option>
                                    <option value="get">get</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span style="color: red">*</span>所属分组：</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="group">
                                    {% for item in tem_groups %}
                                        <option value="{{ item }}">{{ tem_groups[item] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span style="color: red">*</span>预期结果：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="expect_res">
                            </div>
                            <p style="color: red; margin-left: 10%;">预期结果支持or、and、not逻辑多重断言（不使用默认为模糊匹配），不区分大小写，具体格式如下：<br>
                                or=x$y$z（说明：响应结果中只需要匹配到x、y、z三者中的一个即为匹配成功）<br>
                                and=x$y$z（说明：响应结果中必须同时匹配到x、y、z三者的全部才为匹配成功）<br>
                                not=x$y$z（说明：响应结果中如果匹配到x、y、z三者中的任意一个，即为匹配失败）
                            </p>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">headers：</label>
                            <div class="col-sm-10">
                                <textarea type="text" class="form-control" name="header"></textarea>
                            </div>
                            <p style="color: red; margin-left: 10%;">headers填写的格式为：key1#value1$key2#value2$…，不能有汉字，key必须含有字母。<br>
                                post请求常用传参格式：content-type#application/x-www-form-urlencoded<br>
                                get请求常用传参格式：accept#application/json$AUTOTEST#1<br>
                            </p>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注：</label>
                            <div class="col-sm-10">
                                <textarea type="text" class="form-control" name="remark"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <label><input type="radio" id="enable" name="status" value="1" checked="checked">启用</label><span>&nbsp;&nbsp;</span>
                            <label><input type="radio" id="disable" name="status" value="0">禁用</label>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <textarea type="text" class="form-control" name="debug-info" disabled="disabled" placeholder="调试信息..."></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" id="debug-case-btn">调试</button>
                    <button type="button" class="btn btn-primary" id="save-case-btn">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload();">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看 -->
    <div class="modal fade" id="preview-case-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="width: 70%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">用例信息</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用例名称：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="preview-case_name" disabled="disabled">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">用例编号：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="preview-case_sign" disabled="disabled">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">请求URL：</label>
                            <div class="col-sm-10">
                                <textarea type="text" class="form-control" name="preview-case_url" disabled="disabled"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">请求参数：</label>
                            <div class="col-sm-10">
                                <textarea type="text" class="form-control" name="preview-case_param"  disabled="disabled"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">请求方法：</label>
                            <div class="col-sm-3">
                                <select class="form-control" id="preview-method" disabled="disabled">
                                    <option value="post">post</option>
                                    <option value="get">get</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">所属分组：</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="preview-group" disabled="disabled">
                                    {% for case in cases %}
                                        <option value="{{ case.group_id }}">{{ tem_groups[case.group_id] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">预期结果：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="preview-expect_res" disabled="disabled">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">headers：</label>
                            <div class="col-sm-10">
                                <textarea type="text" class="form-control" name="preview-header" disabled="disabled"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注：</label>
                            <div class="col-sm-10">
                                <textarea type="text" class="form-control" name="preview-remark"  disabled="disabled"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <label><input type="radio" id="enabled" name="status" value="1" checked="checked" disabled="disabled">启用</label><span>&nbsp;&nbsp;</span>
                            <label><input type="radio" id="disabled" name="status" value="0" disabled="disabled">禁用</label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload();">关闭</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}